<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 转换 - 空间位移</title>
  <style>
    body {
      padding: 0 40px;
    }

    .box {
      width: 600px;
      height: 400px;
      background-color: pink;

      /* CSS 中透视仅仅体现为一个属性而已 */
      /* 拥有这个属性即可获取 近大远小 的视觉差 */

      /* 
        perspective 值的大小会影响视觉效果
        取值越大视觉感越弱
        取值越小视觉感越强
        通常值取 800 ~ 1200
      */
      perspective: 1200px;
      position: relative;
    }

    .box .inner {
      width: 200px;
      height: 100px;
      background-color: red;
      margin: -50px 0 0 -100px;

      position: absolute;
      left: 50%;
      top: 50%;
    }

    .box:hover .inner {
      /* 如何使得 inner 盒子在空间内产生位移？ */

      /* 无论是平面转换还是空间转换均使用 transform 属性 */
      transform: translateZ(100px);
      
      /* transform: translate3d(x, y, z); */
    }
  </style>
</head>
<body>
  <h3>空间位移</h3>
  <p>3d位移与2d位移都是盒子的位置移动，区别在于3d位移增加了沿着 z 轴的位置移动。</p>
  
  <div class="box">
    <div class="inner"></div>
  </div>
</body>
</html>